<script lang="ts" setup>
  import appStore from '@/store'
  import lts from '@/api/lts'
  import { reactive, ref, computed } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { timeFormatUTC } from '@/utils/formatter'
  import { ElMessage, ElMessageBox } from 'element-plus'
  const router = useRouter()
  const route = useRoute()
  interface apiData {
    access_config_name: string
    access_config_id: string
    host_group_id_list: string
    log_group_id: string
    log_stream_name: string
    log_stream_id: string
    log_config_path: string
    create_time: string
    description: string
  }
  const param = reactive({
    project_id: appStore.userStore.project_id,
    offset: 1,
    limit: 10
  })
  let userType = ref()
  userType.value = localStorage.getItem('UserType') as string
  let tableData: apiData[] = reactive([])
  let tableTotal = ref(0)
  const getLtsList = async () => {
    let res = await lts.getLts(param)
    tableTotal.value = res.data.total
    tableData.length = 0
    res.data.access_config.forEach((item: any) => {
      tableData.push({
        ...item,
        loading: false
      })
    })
  }
  const buildAlias = (data: any) => {
    let obj = JSON.stringify(tableData)
    router.push({
      name: 'createLts',
      params: {
        Tdata: encodeURIComponent(obj)
      }
    })
  }
  getLtsList()
  const handleSizeChange = (val: number) => {
    param.limit = val
    param.offset = 1
    getLtsList()
  }
  const handleCurrentChange = (val: number) => {
    param.offset = val
    getLtsList()
  }

  const showDetails = (id: any) => {
    router.push({
      name: 'ltsDetail',
      params: {
        id
      }
    })
  }
  const goObs = (path: string) => {
    if (!path) return false
    window.open(path, '_blank')
  }
  const deleteLts = async (row: any) => {
    ElMessageBox.confirm('确认删除此条数据？', '警告', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        row.loading = true
        let res = await lts.deleteLts({ project_id: appStore.userStore.project_id, access_config_id: row.access_config_id })
        row.loading = false
        if (res.status < 300) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getLtsList()
        } else {
          ElMessage({
            type: 'info',
            message: '删除失败'
          })
        }
      })
      .catch(() => {
        row.loading = false
      })
  }
</script>
<template>
  <div id="aliasManager" class="list-index">
    <div class="run-box">
      <div class="state-box">
        <div class="run-label">日志管理</div>
      </div>
    </div>
    <div class="top-button" v-if="userType >= 5">
      <button class="btn new" @click="buildAlias(tableData)">新建日志</button>
    </div>
    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#fafafe', color: '#1d1d1f' }"
        :border="true"
        :default-sort="{ prop: 'creation_time', order: 'descending' }"
      >
        <el-table-column label="日志接入名称/ID" class-name="elcell" width="260">
          <template #default="scope">
            <div class="toDetails" @click="showDetails(scope.row.access_config_id)">
              {{ scope.row.access_config_name }}
            </div>
            <el-tooltip effect="dark" :content="scope.row.access_config_id" placement="bottom">
              <div class="id-box">
                {{ scope.row.access_config_id }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述">
          <template #default="scope">
            {{ scope.row.description ? scope.row.description : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="日志流名称">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.log_stream_name" placement="bottom" v-if="scope.row.log_stream_name.length > 22">
              <div class="path-box" @click="goObs(scope.row.log_stream_link)">
                {{ scope.row.log_stream_name }}
              </div>
            </el-tooltip>
            <div class="id-box" v-else>
              {{ scope.row.log_stream_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="log_group_name" label="日志组名称">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.log_group_name" placement="bottom" v-if="scope.row.log_group_name.length > 22">
              <div class="id-box">
                {{ scope.row.log_group_name }}
              </div>
            </el-tooltip>
            <div class="id-box" v-else>
              {{ scope.row.log_group_name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="OBS转储路径">
          <template #default="scope">
            <el-tooltip effect="dark" :content="scope.row.obs_transfer_path" placement="bottom" v-if="scope.row.obs_transfer_path.length > 22">
              <div class="path-box" @click="goObs(scope.row.obs_transfer_path_link)">
                {{ scope.row.obs_transfer_path ? scope.row.obs_transfer_path : '--' }}
              </div>
            </el-tooltip>
            <div :class="scope.row.obs_transfer_path ? 'path-box' : ''" v-else @click="goObs(scope.row.obs_transfer_path_link)">
              {{ scope.row.obs_transfer_path ? scope.row.obs_transfer_path : '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" :formatter="timeFormatUTC" sortable width="280" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <div class="actions-box">
              <div class="actions-details" @click="showDetails(scope.row.access_config_id)">详情</div>
              <div class="line"></div>
              <el-button class="actions-delete" @click="deleteLts(scope.row)" v-if="userType >= 5" :loading="scope.row.loading">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="param.offset"
        v-model:page-size="param.limit"
        :page-sizes="[10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  @import '@/assets/scss/list.scss';
  :deep(.el-button) {
    border: none;
    color: #8a8e99;
    padding: 0 4px;
  }
</style>
